<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数式组件只能使用props</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script src="./js/prop-types.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        // class Person extends React.Component {
        //     // 构造器可写可不写,如果写了构造器则一定要接收props
        //     constructor(props) {
        //         super(props);
        //         console.log('constructor',this.props)
        //     }
        //     // 对标签属性及类型、必要性进行限制
        //     static propTypes = {
        //         name:PropTypes.string.isRequired, // 限制姓名是字符串且必传
        //         age:PropTypes.number, // 限制年龄必须是数值
        //         sex: PropTypes.string, // 限制sex必须是字符串
        //         speak:PropTypes.func // 限制speak必须是函数
        //     }
        //     // 指定默认标签属性值
        //     //  前面都加static是为了将属性传给Person对象本身而不是实例对象
        //     static  defaultProps = {
        //         age:18,
        //         sex:'男'
        //
        //     }
        //     render() {
        //         console.log(this)
        //         const {name, age, sex} = this.props
        //         return (
        //             <div>
        //                 <li>姓名:{name}</li>
        //                 <li>年龄:{age}</li>
        //                 <li>性别:{sex}</li>
        //             </div>
        //         )
        //     }
        // }

        function Person(props){
            console.log(props)
            const {name,age,sex} = props
            return (
                         <div>
                             <li>姓名:{name}</li>
                             <li>年龄:{age}</li>
                             <li>性别:{sex}</li>
                        </div>
                     )
        }

        Person.propTypes = {
                    name:PropTypes.string.isRequired, // 限制姓名是字符串且必传
                    age:PropTypes.number, // 限制年龄必须是数值
                    sex: PropTypes.string, // 限制sex必须是字符串
                    speak:PropTypes.func // 限制speak必须是函数
                }
                // 指定默认标签属性值
                //  前面都加static是为了将属性传给Person对象本身而不是实例对象
               Person.defaultProps = {
                    age:18,
                    sex:'男'

                }



        ReactDOM.render(<Person name="小刘" age={18} sex="男" speak={speak}/>, document.getElementById('app'))


        function speak(){
            console.log('说话了')
        }
    </script>

</body>
</html>
